<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>响应布局</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			font-family: 'Microsoft yahei';
			background: #eee;
			font-size: 12px;
		}

		p { 
			margin: 0;
			padding: 0;
		}
/*		.quote {
			font-size: 40px;
		}*/

		

		

		.item-container {
			/*width: 300px;*/
			border: 1px solid #ddd;
			border-radius: 5px;
			padding: 5px 10px;
			background: #fff;
		}

		.img {
			width:80px;
			height: 80px;
			background: url('http://p4.qhimg.com/t0119ba9a310ba93229.jpg');
			border-radius: 50%;
			background-size:cover;
			border: 5px solid #eee;
			/*display: inline-block;*/
			float: left;
			vertical-align: top;
			margin-right: 10px;
		}

		h1 {
			/*display: inline-block;*/
			float: left;
			padding: 0;
			margin: 0;
			font-size: 20px;
			width: 60%;
		}

		.strongs{
			
			font-size: 14px;
			border-radius: 5px;
			padding: 0 2px;
			margin-left: 2px;
		}

		.strongs-red {
			border: 1px solid #d9534f;
			color: #d9534f;
		}

		.strongs-green {
			border: 1px solid #5cb85c;
			color: #5cb85c;
			margin-right: 5px;
		}

		.info {
			/*display: inline-block;*/
			/*clear: both;*/
			float: left;
			padding: 0;
			margin: 0;
			font-size: 14px;
			color: #bbb;
			width: 60%;
		}

		.subject {
			clear: both;
			padding: 0;
			margin: 0;
		}

		.arrow {
			height: 0;
			width: 0;
			padding: 0;
			border: 10px solid transparent;
			border-bottom: 10px solid #d9534f;
			margin-left: 30px;
		}

		.subject-content {
			background: #d9534f;
			border-radius: 5px;
			height: 50px;
			line-height: 50px;
			color: #fff;
			text-indent: 5px;
		}

		.content {
			font-size: 14px;
			margin-top: 10px;
		}

		.time {
			font-size: 12px;
			color: #bbb;
			margin-top: 10px;
		}

		.bg-line {
			height: 20px;
			border-bottom: 1px solid #ccc;
			margin-top: -10px;
		}

		.bg-line-info {
			margin-top: -5px;
			width: 30%;
			background: #fff;
			text-align: center;
			margin: -8px auto 0;
		}

		.face {
			margin: 0;
			padding: 0;
			margin-top: 10px;
		}

		ul li{
			list-style-type: none;
			display: inline-block;
			text-align: center;
		}

		.face img {
			width: 65px;
			height: 65px;
			border-radius: 50%;
			margin-right: 2px;
			border: 1px solid #ddd;
		}

		@media only screen and (max-width: 300px){
			.item-container ,.subject-content{
				max-width: 300px;
			}

			
		}
	</style>
</head>
<body>
	<div class="item-container">
		<div class="img">
		</div>
		<h1>大妈<span class="strongs strongs-red">受刺激者</span></h1>
		<p class="info">街头打陌生女孩</p>
		<h2 class="subject">
			<div class="arrow"></div>
			<div class="subject-content">
				<span class="quote"></span>
				<span>预定义样式</span>
				<span class="quote"></span>
			</div>
		</h2>
		<p class="content"><span class="strongs strongs-green">新闻背景</span>CSS3对于background做了一些修改，最明显的一个就是采用设置多背景，不但添加了4个新属性，并且还对目前的属性进行了调整增强。</p>
		<p>
			<span class="time">
				2015-08-20
			</span>
		</p>

		<div class="bg-line"></div>
		<div class="bg-line-info">表个态吧</div>
		<ul class="face">
			<li><img src="http://img0.pconline.com.cn/pconline/news/qq/bq/000059121/1405/5_1.jpg" alt=""><br/><span>1123</span></li>
			<li><img src="http://img0.pconline.com.cn/pconline/news/qq/bq/000059127/1406/4_1.jpg" alt=""><br/><span>1123</span></li>
			<li><img src="http://img0.pconline.com.cn/pconline/news/qq/bq/000059127/1406/4_1.jpg" alt=""><br/><span>1123</span></li>
			<li><img src="http://img0.pconline.com.cn/pconline/news/qq/bq/000059127/1406/4_1.jpg" alt=""><br/><span>1123</span></li>
		</ul>
	</div>
</body>
</html>